body, h1, h2, h3, h4, h5, h6, hr, p,blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input,textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea {font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var {font-style:normal; }
code, kbd, pre, samp {font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea {font-size:100%; }
table { border-collapse:collapse;border-spacing:0; }
.myInput{
  width: 200px;
  height: 44px;
  margin: 100px;
  line-height: 44px;
  border: 1px solid #ccc;
  border-radius: 22px;
  outline: none;
  text-indent: 20px;
  background: #f8f8f8;
  transition: .3s;
}

.myInput.active{
  width: 250px;
  color: red;
  border-color: aqua;
  box-shadow: 0 0 2px;
}

.myDiv{ width:200px; height:200px; background: #888888;}
.guo-enter{opacity: 0; margin-left: 300px;}
.guo-enter-active{opacity: 1; transition: 0.7s; margin-left: 0;}
.guo-leave{opacity: 1; background: green;}
.guo-leave-active{opacity: 0; transition: 0.7s}
.guo-appear{opacity: 0; background: red}
.guo-appear-active{opacity: 1;background: 888888;transition: 0.7s}